<template>
	<el-drawer v-model="showDrawer" :title="title" :size="size" :destroyOnClose="destroyOnClose"
		:close-on-click-modal="false">
		<div class="formDrawer">
			<div class="body">
				<slot></slot>
			</div>
			<div class="actions">
				<el-button class="btn1" type="primary" @click="submit" :loading="loading">{{ confirmText }}</el-button>
				<el-button class="btn2" type="default" @click="close">取消</el-button>
			</div>
		</div>
	</el-drawer>
</template>

<script setup>
import { ref } from 'vue'

const showDrawer = ref(false)
const loading = ref(false)

const open = () => showDrawer.value = true
const close = () => showDrawer.value = false

// 暴露事件给父组件以提供对按钮的监听
const emit = defineEmits(["submit"])
const submit = () => emit("submit")

// 暴露属性让父组件可以通过动态绑定获取属性值
const props = defineProps({
	title: String,
	size: {
		type: String,
		default: "45%"
	},
	// Drawer的属性: destroy-on-close
	destroyOnClose: {
		type: Boolean,
		default: false
	},
	confirmText: {
		type: String,
		default: "提交"
	}
})

const showLoading = () => loading.value = true
const hideLoading = () => loading.value = false

// 向父组件暴露方法，以对象的形式传递给父组件, 父组件可以通过模版 ref 的方式获取当前实例（对象）
defineExpose({
	open,
	close,
	showLoading,
	hideLoading
})

</script>

<style scoped>
.formDrawer {
	width: 100%;
	height: 100%;
	position: relative;
	@apply flex flex-col;
}

.formDrawer .body {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 50px;
	overflow-y: auto;
}

.formDrawer .actions {
	height: 50px;
	@apply mt-auto flex items-center justify-center;
}

.formDrawer .actions .btn1 {
	@apply flex items-center bg-violet-400 text-light-50;
	height: 36px;
	border-radius: 15px;
	border: none;
	color: #fff;
	cursor: pointer;
}

.formDrawer .actions .btn2 {
	@apply flex items-center bg-gray-500 text-light-50;
	height: 36px;
	border-radius: 15px;
	border: none;
	color: #fff;
	cursor: pointer;
}

.btn1:hover {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.btn2:hover {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
</style>